<template>
    <div class="cart">
        <PageHeader
            :title="$route.meta.title"
            :needLeft="false"
            :needRight="hasCart"
            :rightText="alter ? '完成': '编辑'"
            @headerRightClick="alterChange"
        />
        <div class="empty-box" v-if="!hasCart">
            <img :src="require('@/assets/img/cart/empty.png')" alt="">
            <h3>购物车暂无商品</h3>
            <p>添加到购物车的商品将会显示在这里</p>
            <div class="btn-box">
                <router-link
                    tag="div"
                    to="/login"
                    class="to-login"
                    v-if="!hasUser"
                >
                    登录
                </router-link>
                <router-link
                    tag="div"
                    to="/home"
                    class="to-buy"
                >
                    现在选购
                </router-link>
            </div>
        </div>
        <div class="cart-container" v-if="hasCart">
            <div class="discount-box" v-if="!alter">
                <div class="left">
                    <i></i>
                    <span>点击领取优惠券</span>
                </div>
                <div class="right">
                    <van-icon name="arrow" color="#c33939" />
                </div>
            </div>
            <div class="cart-content">
                <div class="item-box">
                    <li
                        class="item-li cart-card"
                        v-for="item in cartItemList"
                        :key="item.sku_id"
                    >
                        <div class="check-box" :class="item.checked ? 'active' : ''">
                            <i @click="changeChecked({ id: item.sku_id })"></i>
                        </div>
                        <div class="item-container">
                            <div class="img-box">
                                <img :src="item.image" alt="">
                            </div>
                            <div class="content">
                                <div class="title-box">
                                    <h3>{{ item.title }}</h3>
                                </div>
                                <div class="type-box">
                                    <span
                                        v-for="(cell, j) in item.type"
                                        :key="j"
                                    >
                                    {{ cell.value }}
                                    </span>
                                </div>
                                <div class="price-box" v-if="!alter">
                                    <span class="current-price">¥{{ item.current_price | toFixed2 }}</span>
                                    <span class="current-count">X{{ item.count }}</span>
                                    <span class="old-price">¥{{ item.price | toFixed2 }}</span>
                                </div>
                                <div class="alter-box" v-if="alter">
                                    <div class="alter-count">
                                        <van-stepper
                                            :value="item.count"
                                            theme="round"
                                            button-size="22"
                                            disable-input
                                            @plus="plusCount({ id: item.sku_id })"
                                            @minus="minusCount({ id: item.sku_id })"
                                        />
                                    </div>
                                    <div class="alter-price">
                                        ¥{{ item.price | toFixed2 }}
                                    </div>
                                </div>
                            </div>
                            <router-link
                                :to="{
                                    name: 'item',
                                    query: {
                                        id: item.sku_id
                                    }
                                }"
                                tag="div"
                                class="to-item"
                                v-if="!alter"
                            />
                        </div>
                    </li>
                </div>
                <Recommend />
            </div>
            <div class="total-box">
                <div class="check-box">
                    <i
                        :class="allChecked ? 'active' : ''"
                        @click="changeAllChecked()"
                    ></i>
                    <p>
                        已选
                        <b :class="alter ? 'active' : ''">{{ this.totalCheckedCount }}</b>
                        件
                    </p>
                </div>
                <div class="price-box">
                    <div class="price" v-if="!alter">
                        <h6>合计：<span>¥{{ totalCheckedPrice | toFixed2 }}</span></h6>
                        <p>应付总额不含运费</p>
                    </div>
                    <div
                        class="btn-now"
                        :class="someChecked ? 'active' : ''"
                        v-if="!alter"
                    >
                        现在结算
                    </div>
                    <div
                        class="btn-now"
                        :class="someChecked ? 'active' : ''"
                        v-if="alter"
                        @click="delateItemEvent()"
                    >
                        删除所选
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import PageHeader from '@/components/PageHeader'
import Recommend from '@/components/Recommend'
import { createNamespacedHelpers } from 'vuex'
const cartStore = createNamespacedHelpers('cart')
const userStore = createNamespacedHelpers('user')
export default {
    name: 'cart',
    data () {
        return {
            alter: false
        }
    },
    computed: {
        ...cartStore.mapState(['cartItemList']),
        ...cartStore.mapGetters(['allChecked', 'someChecked']),
        ...userStore.mapState(['user']),
        totalCheckedCount () {
            return this.cartItemList.reduce((count, item) => {
                if (item.checked) {
                    count += item.count
                }
                return count
            }, 0)
        },
        totalCheckedPrice () {
            return this.cartItemList.reduce((price, item) => {
                if (item.checked) {
                    price += item.price * item.count
                }
                return price
            }, 0)
        },
        hasCart () {
            if (this.cartItemList.length === 0) {
                return false
            } else {
                return true
            }
        },
        hasUser () {
            if (this.user.username !== '' && this.user.username !== '游客') {
                return true
            } else {
                return false
            }
        }
    },
    methods: {
        ...cartStore.mapMutations(['changeChecked', 'changeAllChecked', 'allNoChecked', 'plusItemCount', 'minusItemCount', 'delateItem']),
        alterChange () {
            this.alter = !this.alter
            if (this.alter) {
                this.allNoChecked()
            }
        },
        plusCount (idObj) {
            this.plusItemCount(idObj)
        },
        minusCount (idObj) {
            this.minusItemCount(idObj)
        },
        delateItemEvent () {
            this.delateItem()
            if (this.cartItemList.length === 0) {
                this.alter = false
            }
        }
    },
    components: {
        PageHeader,
        Recommend
    },
    created () {
        // console.log(this.$route)
    }
}
</script>

<style lang="scss">
.cart {
    height: 100%;
    background-color: #e9e9e9;
    display: flex;
    flex-direction: column;
    // overflow-x: hidden;
    .empty-box {
        img {
            display: block;
            width: 88px;
            padding-top: 50%;
            margin: 0 auto;
        }
        h3 {
            font-size: 24px;
            color: #bdbdbd;
            text-align: center;
            margin-top: 24px;
        }
        p {
            font-size: 14px;
            color: #bdbdbd;
            text-align: center;
            margin-top: 12px;
        }
        .btn-box {
            display: flex;
            justify-content: center;
            align-items: center;
            div {
                width: 133px;
                height: 38px;
                font-size: 14px;
                font-weight: bold;
                line-height: 38px;
                text-align: center;
                border-radius: 5px;
                margin-top: 16px;
                &.to-login {
                    color: #fff;
                    background-color: #5273de;
                    border: 1px solid #334ba7;
                }
                &.to-buy {
                    color: #4c4c4c;
                    background-color: #e7e7e7;
                    border: 1px solid #cfcfcf;
                    margin-left: 7px;
                }
            }
        }
    }
    .cart-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow-x: hidden;
        .discount-box {
            height: 65px;
            width: 100%;
            background-color: #fee1df;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: 20px;
            padding-right: 15px;
            margin-bottom: 6px;
            box-sizing: border-box;
            .left {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-bottom: 6px;
                i {
                    display: block;
                    width: 30px;
                    height: 30px;
                    background: url(../assets/img/cart/card-logo.png);
                    background-size: 100% 100%;
                }
                span {
                    margin-left: 18px;
                    color: #c33939;
                    font-size: 16px;
                    font-weight: bold;
                }
            }
        }
        .cart-content {
            flex: 1;
            overflow-x: hidden;
            .item-box {
                .cart-card {
                    // height: 500px;
                    background-color: #fff;
                    margin-bottom: 6px;
                    border-top: 1px solid #f2f2f2;
                    border-bottom: 1px solid #f2f2f2;
                }
                .item-li {
                    display: flex;
                    justify-content: flex-start;
                    align-items: stretch;
                    padding: 20px 0;
                    overflow: hidden;
                    .check-box {
                        width: 44px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        i {
                            display: block;
                            width: 24px;
                            height: 24px;
                            background: url(../assets/img/cart/check-logo.png);
                            background-size: 100% auto;
                            background-position: 0 -287px;
                        }
                        &.active i{
                            background-position: 0 0;
                        }
                    }
                    .item-container {
                        flex: 1;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        overflow: hidden;
                        position: relative;
                        .img-box {
                            width: 90px;
                            height: 90px;
                            img {
                                width: 100%;
                            }
                        }
                        .content {
                            flex: 1;
                            padding-left: 10px;
                            padding-right: 15px;
                            box-sizing: border-box;
                            overflow: hidden;
                            .title-box {
                                h3 {
                                    font-size: 14px;
                                    color: #000000;
                                    font-weight: bold;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                            }
                            .type-box {
                                font-size: 10px;
                                color: #6c6c6c;
                                margin-top: 10px;
                                span {
                                    &::before {
                                        content: "·"
                                    }
                                    &:first-child::before {
                                        content: "";
                                    }
                                }
                            }
                            .price-box {
                                font-size: 12px;
                                margin-top: 10px;
                                font-weight: bold;
                                display: flex;
                                align-items: center;
                                .current-price {
                                    color: #c73734;
                                }
                                .current-count {
                                    color: #878787;
                                    margin-left: 12px;
                                }
                                .old-price {
                                    color: #6c6c6c;
                                    font-size: 10px;
                                    text-decoration: line-through;
                                    margin-left: 17px;
                                }
                            }
                            .alter-box {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                margin-top: 8px;
                                .alter-count {
                                    .van-stepper__input {
                                        font-size: 16px;
                                        color: #535353;
                                        font-weight: bold;
                                        width: 40px;
                                    }
                                    .van-stepper__minus,
                                    .van-stepper__plus {
                                        color: #818181;
                                        background-color: #fdfdfd;
                                        border: 1px solid #4c4c4d;
                                        font-weight: bold;;
                                    }
                                }
                                .alter-price {
                                    font-size: 14px;
                                    color: #c73734;
                                    font-weight: bold;
                                }
                            }
                        }
                        .to-item {
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            top: 0;
                            left: 0;
                        }
                    }
                }
            }
        }
        .total-box {
            height: 50px;
            background-color: #f6f6f6;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .check-box {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                i {
                    margin-left: 13px;
                    display: block;
                    width: 24px;
                    height: 24px;
                    background: url(../assets/img/cart/check-logo.png);
                    background-size: 100% auto;
                    background-position: 0 -287px;
                    &.active{
                        background-position: 0 0;
                    }
                }
                p {
                    margin-left: 10px;
                    font-size: 12px;
                    color: #959595;
                    b {
                        font-size: 16px;
                        font-weight: bold;
                        margin: 0 3px;
                        &.active {
                            color: #c73734;
                        }
                    }
                }
            }
            .price-box {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .price {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    h6 {
                        font-size: 10px;
                        color: #262626;
                        span {
                            font-size: 14px;
                            color: #c73734;
                            font-weight: bold;
                        }
                    }
                    p {
                        font-size: 12px;
                        color: #515151;
                        margin-top: 8px;
                    }
                }
                .btn-now {
                    width: 104px;
                    height: 39px;
                    background-color: #989898;
                    border: 1px solid #6d6d6d;
                    border-radius: 5px;
                    font-size: 16px;
                    color: #fff;
                    font-weight: bold;
                    text-align: center;
                    line-height: 39px;
                    margin: 0 10px;
                    &.active {
                        background-color: #4e6cd9;
                        border: 1px solid #334cab;
                    }
                }
            }
        }
    }
}
</style>
